<template>
	<div class="home">home page</div>
</template>

<script setup>
	// 获取登录的token
	const cookie = useCookie('token')
	console.log('token: ', cookie.value)

	// 1. 使用$fetch 发起网络请求
	const BASE_URL = 'http://codercba.com:9060/juanpi/api'
	// $fetch: 服务端和客户端都会发生请求, 所以一般使用的比较少
	/* $fetch(BASE_URL + '/homeInfo', {
		method: 'GET',
	}).then((res) => {
		console.log(res)
	}) */

	/* interface IResultData {
		code: number
		data: any
	} */

	// 2. 使用官网提供的 hooks API (在刷新页面时, 可以减少客户端发起一次网络请求)
	/* const { data } = await useAsyncData<IResultData>('homeInfo', () => {
		return $fetch(BASE_URL + '/homeInfo', {
			method: 'GET',
		})
	})

	const { data: newData } = await useAsyncData<IResultData>('homeInfo', () => {
		return $fetch(BASE_URL + '/goods', {
			method: 'POST',
		})
	}) */

	// 3. useAsyncData 简写(会自定义key)
	// const { data } = await useFetch<IResultData>(BASE_URL + '/homeInfo')

	// 4. useFetch 的 options
	/* const { data } = await useFetch<IResultData>('/homeInfo', {
		method: 'GET',
		baseURL: BASE_URL,
		query: {
			name: 'liujun',
		},
		// params: 这个是query的别名
		// body: {}, post 使用的body
		// headers: {}
	}) */

	// 5. useFetch post请求
	/* const { data } = await useFetch('/goods', {
		baseURL: BASE_URL,
		method: 'POST',
		body: {
			count: 2,
		},
	}) */

	// 6. 拦截器
	const { data } = await useFetch('/goods', {
		method: 'post',
		baseURL: BASE_URL,
		body: {
			count: 1,
		},
		// 请求拦截 (server & client)
		onRequest({ request, options }) {
			console.log(options.method)
			/* options.headers = {
				token: 'xxx',
			} */
		},
		onRequestError({ request, options, error }) {
			console.log('onRequestError')
		},
		// 响应拦截
		onResponse({ request, response, options }) {
			console.log('onResponse')
			console.log(response._data)

			// return response._data.data.server_jsonstr

			// 如果想重新返回数据, 需要重新response._data.data中的数据, 直接返回是无效的, 最终获取的还是原先的数据
			return (response._data.data = {
				name: 'liujun',
			})
		},
		onResponseError({ request, response, options, error }) {
			console.log('onResponseError')
		},
	})

	console.log(data.value?.data)
</script>
